<template>
    <div class="db-demo-container">
        <div class="add">
            <input
                type="text"
                placeholder="请输入姓名"
                v-model="addData.nameIpt"
            />
            <input
                type="text"
                placeholder="请输入性别"
                v-model="addData.sexIpt"
            />
            <input
                type="text"
                placeholder="请输入年龄"
                v-model="addData.ageIpt"
            />
            <button @click="addUser">添加或修改数据</button>
        </div>
        <div class="search">
            <input
                type="text"
                placeholder="请输入要查询的名字"
                v-model="searchData"
            />
            <button @click="search">查询</button>
            <input
                type="text"
                placeholder="请输入要删除的名字"
                v-model="deleteName"
            />
            <button @click="deleteUser">删除</button>
        </div>
        <ul>
            <li class="head"><span>性别</span><span>年龄</span></li>
            <div class="scroll">
                <li v-for="item in dataList" :key="item.id">
                    <span>{{ item.sex }}</span>
                    <span>{{ item.age }}</span>
                </li>
            </div>
        </ul>
    </div>
</template>
<script>
export default {
    name: "",
    props: {},
    data() {
        return {
            addData: {
                nameIpt: "",
                sexIpt: "",
                ageIpt: "",
            },
            searchData: "",
            deleteName: "",
            dataList: [],
            currentDbObj: null,
        };
    },
    created() {
        this.initDatabase();
    },
    mouted() {},
    computed: {},
    watch: {},
    methods: {
        //初始化数据库
        initDatabase() {
            const request = window.indexedDB.open("test", 1);
            request.onupgradeneeded = (e) => {
                console.log("数据库初始化完毕或升级成功");
                const db = e.target.result;
                if (!db.objectStoreNames.contains("user")) {
                    db.createObjectStore("user");
                }
            };
            request.onsuccess = this.connectSuccess;
            request.onerror = (e) => {
                console.log("数据库连接失败", e);
            };
        },
        //连接成功拿到数据库对象
        connectSuccess(e) {
            const db = e.target.result;
            this.currentDbObj = db;
        },
        //获取某个表存储对象
        getObjectStore(storeName) {
            const transaction = this.currentDbObj.transaction(
                [storeName],
                "readwrite"
            );
            const store = transaction.objectStore(storeName);
            return store;
        },
        //添加用户
        addUser() {
            if (
                !this.addData.sexIpt ||
                !this.addData.ageIpt ||
                !this.addData.nameIpt
            )
                return;
            const store = this.getObjectStore("user");
            const r = store.put(
                { sex: this.addData.sexIpt, age: this.addData.ageIpt },
                this.addData.nameIpt
            );
            r.onsuccess = () => {
                this.addData.nameIpt = "";
                this.addData.ageIpt = "";
                this.addData.sexIpt = "";
            };
        },
        //删除用户
        deleteUser() {
            const store = this.getObjectStore("user");
            const r = store.delete(this.deleteName);
            r.onsuccess = () => {
                this.deleteName = "";
            };
        },
        //查询用户
        search() {
            const store = this.getObjectStore("user");
            //单查询还是全部查询
            if (this.searchData) {
                store.get(this.searchData).onsuccess = (e) => {
                    this.dataList.push({
                        ...e.target.result,
                    });
                };
            } else {
                store.getAll().onsuccess = (e) => {
                    this.dataList = [...e.target.result];
                };
            }
        },
    },
};
</script>
<style lang="less" scoped>
@import "~@/styles/mixins.less";
.db-demo-container {
    width: 1000px;
    height: 600px;
    border: 1px solid rgba(0, 0, 0, 0.309);
    background-color: #fff;
    box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.309);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    row-gap: 15px;
    padding: 20px;
    .self-center();
    input {
        width: 200px;
        height: 40px;
        outline: none;
        border-radius: 12px;
        border: 2px solid rgba(0, 0, 0, 0.459);
        padding-left: 10px;
        &:focus {
            border-color: rgba(0, 0, 255, 0.463);
        }
    }
    button {
        width: 100px;
        height: 40px;
        border-radius: 12px;
        text-align: center;
        line-height: 40px;
        border: none;
        background: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
        &:hover {
            opacity: 0.7;
        }
    }
    .add {
        display: flex;
        column-gap: 20px;
        align-items: center;
        justify-content: flex-start;
    }
    .search {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        column-gap: 20px;
    }
    ul {
        width: 100%;
        list-style: none;
        padding: 0;
        .head {
            border-bottom: 1px solid rgba(0, 0, 0, 0.486);
        }
        li {
            width: 100%;
            height: 40px;
            line-height: 40px;
            text-align: center;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            span {
                width: 32%;
                height: 100%;
            }
            .delete {
                background-color: rgba(255, 0, 0, 0.757);

                box-sizing: border-box;
                width: 50px;
                height: 30px;
            }
        }
        .scroll {
            width: 100%;
            height: 300px;
            overflow-y: auto;
        }
    }
}
</style>
